<template>
  <div class="home" v-loading="loading">
    <div class="row-1" v-if="role == 1 || role == 2">
      <el-badge
        style="display: none"
        :value="1"
        :max="99"
        :is-dot="true"
        :hidden="false"
        type="danger"
      >
        <i class="el-icon-s-order"></i>
        <label> 我的办件 </label>
      </el-badge>
      <el-dropdown @command="linkTo">
        <div>
          <i class="el-icon-s-promotion"></i>
          <label> 我要登记 </label>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, index) in dropdownOptions"
            :key="index"
            :icon="item.icon"
            :class="item.class"
            :command="item.linkUrl"
          >
            {{ item.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <div v-if="role == 1" @click="$router.push(`/checkAndRectifyDetails/0`)">
        <i class="el-icon-edit-outline"></i>
        <label> 新建整改单 </label>
      </div>
    </div>
    <!-- <div class="row-1" v-if="role == 3">
      <div v-if="role == 3">
        <i class="el-icon-edit-outline"></i>
        <label> 新建交办单 </label>
      </div>
      <div v-if="role == 3">
        <i class="el-icon-edit-outline"></i>
        <label> 新建督办单 </label>
      </div>
      <div v-if="role == 3">
        <i class="el-icon-edit-outline"></i>
        <label> 新建整改单 </label>
      </div>
    </div> -->
    <div class="fixed-row">
      <!-- 代办 -->
      <WorkTodo2
        v-if="role == 2"
        class="box mb-10"
        :homeRole="role"
      ></WorkTodo2>
      <WorkTodo3
        v-if="role == 3"
        class="box mb-10"
        :homeRole="role"
      ></WorkTodo3>
      <WorkTodo4
        v-if="role == 4"
        class="box mb-10"
        :homeRole="role"
      ></WorkTodo4>
      <!-- 发改领导首页 -->
      <template v-if="role == 1">
        <el-row class="row-2" :gutter="20">
          <el-col class="col" :lg="8" :md="24" :offset="0">
            <div class="box">
              <Instructinos
                :homeRole="role"
                :listData="instructinosData"
              ></Instructinos>
            </div>
          </el-col>
          <el-col class="col" :lg="8" :md="24" :offset="0">
            <div class="box">
              <CheckAndRectify
                :listData="checkAndRectifyData"
              ></CheckAndRectify>
            </div>
          </el-col>
          <el-col class="col" :lg="8" :md="24" :offset="0">
            <div class="box">
              <QuestionAssign
                :homeRole="role"
                :listData="questionAssignData"
              ></QuestionAssign>
            </div>
          </el-col>
        </el-row>
      </template>
    </div>
    <!-- 领导 首页 -->
    <template v-if="role == 1">
      <div class="dynamic-row">
        <el-row class="row-3" :gutter="20">
          <el-col class="chart-col col" :lg="16" :md="24" :offset="0">
            <div class="box">
              <HighFrequencyWarning
                :chartData="highFrequencyWarningData"
              ></HighFrequencyWarning>
            </div>
            <div class="box">
              <WarningRank :chartData="warningRankData"></WarningRank>
            </div>
          </el-col>
          <el-col class="col" :lg="8" :md="24" :offset="0">
            <div class="box">
              <SummaryByUnit :chartData="summaryByUnitData"></SummaryByUnit>
            </div>
          </el-col>
        </el-row>
      </div>
    </template>
    <!-- 部门 首页 -->
    <template v-if="role == 2">
      <div class="dynamic-row">
        <el-row style="height: 500px" class="mb-20" :gutter="20">
          <el-col class="h-full" :span="8" :offset="0">
            <div class="box">
              <ProjectProgress
                :listData="deptProjectProgress"
              ></ProjectProgress>
            </div>
          </el-col>
          <el-col class="h-full" :span="16" :offset="0">
            <div class="box">
              <WarningTable :listData="deptWarningPoint"></WarningTable>
            </div>
          </el-col>
        </el-row>
        <el-row style="height: 300px" class="mb-20" :gutter="20">
          <el-col class="h-full" :span="8" :offset="0">
            <div class="box">
              <DeptWarning :chartData="deptWarningSituation"></DeptWarning>
            </div>
          </el-col>
          <el-col class="h-full" :span="8" :offset="0">
            <div class="box">
              <WarningStructure
                :chartData="deptWarningStructure"
              ></WarningStructure>
            </div>
          </el-col>
          <el-col class="h-full" :span="8" :offset="0">
            <InvestmentProgress
              :deptRank="deptRank"
              :investment="deptInvestmentProgress"
            ></InvestmentProgress>
          </el-col>
        </el-row>
      </div>
    </template>
    <!-- 纪委领导 首页 -->
    <template v-if="role == 3 || role == 4">
      <DCLeaderHome
        :homeRole="role"
        :cardData="dcData.cardData"
        :detailsBar="dcData.alertBar"
        :highFrequencyDept="dcData.highFrequencyDept"
        :highFrequencyMatters="dcData.highFrequencyMatters"
        :redAlertManage="dcData.redAlertManage"
      >
      </DCLeaderHome>
    </template>
    <!-- 纪委组 首页 -->
    <!-- <template v-if="role == 4"> </template> -->
  </div>
</template>

<script>
import Instructinos from "./components/Instructinos.vue";
import CheckAndRectify from "./components/CheckAndRectify.vue";
import QuestionAssign from "./components/QuestionAssign.vue";
import HighFrequencyWarning from "./components/HighFrequencyWarning.vue";
import SummaryByUnit from "./components/SummaryByUnit.vue";
import WarningRank from "./components/WarningRank.vue";
import ProjectProgress from "./components/ProjectProgress.vue";
import WarningTable from "./components/WarningTable.vue";
import WarningStructure from "./components/WarningStructure.vue";
import DeptWarning from "./components/DeptWarning.vue";
import InvestmentProgress from "./components/InvestmentProgress.vue";
import WorkTodo from "./components/WorkTodo.vue";
import DCLeaderHome from "./components/DCLeaderHome.vue";

import {
  getDeptWarning,
  getDeptWarningPoint,
  getDeptWarningStructure,
  getDpetStatistics,
  getDpetWarningRank,
  getHighFrequencyWarning,
  getDeptProjectProgress,
  getStatistics,
  getSummaryByUnit,
  getWarningRank,
  getDeptInvestmentProgress,
  getRedAlertDetails,
  getAlertBar,
  getRedAlertRank,
  getHighFrequencyMatters,
  getRedAlertManage,
  getDCGRedAlertManage,
  getDCGRedAlertRank,
  getDCGHighFrequencyMatters,
  getDCGRedAlertDetails,
  getDCGRedYellowAlert,
} from "@/api/Home/Index";
import { cardData, redAlertDetailBar } from "@/mock/dcLeaderHome";
import WorkTodo3 from "./components/WorkTodo3.vue";
import WorkTodo4 from "./components/WorkTodo4.vue";
import WorkTodo2 from "./components/WorkTodo2.vue";
export default {
  components: {
    Instructinos,
    CheckAndRectify,
    QuestionAssign,
    HighFrequencyWarning,
    SummaryByUnit,
    WarningRank,
    ProjectProgress,
    WarningTable,
    WarningStructure,
    DeptWarning,
    InvestmentProgress,
    WorkTodo,
    DCLeaderHome,
    WorkTodo3,
    WorkTodo4,
    WorkTodo2,
  },
  data() {
    return {
      // 用户角色 1 领导 2 部门 3 纪委领导 4 纪委组
      role: 2,
      dropdownOptions: dropdownOptions,
      // 公共区域
      instructinosData: [],
      checkAndRectifyData: [],
      questionAssignData: [],
      // 领导首页
      highFrequencyWarningData: [],
      warningRankData: [],
      summaryByUnitData: [],

      // 部门首页数据
      deptProjectProgress: [],
      deptWarningPoint: [],
      deptWarningSituation: {},
      deptWarningStructure: [],
      deptRank: "",
      deptInvestmentProgress: {},

      // 纪委首页
      dcData: {
        cardData: [],
        alertBar: [],
        highFrequencyDept: [],
        highFrequencyMatters: [],
        redAlertManage: [],
        workTodo: [],
      },
      loading: false,
    };
  },
  methods: {
    initData() {
      this.loading = true;
      Promise.all([
        getStatistics(),
        getHighFrequencyWarning(),
        getWarningRank(),
        getSummaryByUnit(),
      ]).then((res) => {
        this.instructinosData = res[0].data[0].value;
        this.questionAssignData = res[0].data[1].value;
        this.checkAndRectifyData = res[0].data[2].value;

        this.highFrequencyWarningData = res[1].data;
        this.warningRankData = res[2].data;
        this.summaryByUnitData = res[3].data;

        this.loading = false;
      });
    },
    initDeptData() {
      this.loading = true;
      Promise.all([
        getDpetStatistics(),
        getDeptProjectProgress(),
        getDeptWarningPoint(),
        getDeptWarning(),
        getDeptWarningStructure(),
        getDpetWarningRank(),
        getDeptInvestmentProgress(),
      ]).then((res) => {
        this.instructinosData = res[0].data[0].value;
        this.questionAssignData = res[0].data[1].value;
        this.checkAndRectifyData = res[0].data[2].value;

        this.deptProjectProgress = res[1].data;
        this.deptWarningPoint = res[2].data;
        this.deptWarningSituation = res[3].data;
        this.deptWarningStructure = res[4].data;
        this.deptRank = res[5].data;
        this.deptInvestmentProgress = res[6].data;

        this.loading = false;
      });
    },
    initDCLeader() {
      Promise.all([
        getRedAlertDetails(),
        getAlertBar(),
        getRedAlertRank(),
        getHighFrequencyMatters(),
        getRedAlertManage(),
      ]).then((res) => {
        if (res[0].data.length > 0) {
          res[0].data.map((r) => {
            this.dcData.alertBar = redAlertDetailBar.map((i) => {
              if (r.type == i.title) {
                i.value = r.num;
              }
              return i;
            });
          });
        } else {
          this.dcData.alertBar = redAlertDetailBar;
        }

        res[1].data.map((r) => {
          this.dcData.cardData = cardData.map((i) => {
            if (i.title == r.type) {
              i.value = r.num;

              if (i.finish != undefined) {
                i.finish = r.num2;
              }
              if (i.unfinish != undefined) {
                i.unfinish = r.num3;
              }
            }
            return i;
          });
        });

        this.dcData.highFrequencyDept = res[2].data;

        this.dcData.highFrequencyMatters = res[3].data;

        this.dcData.redAlertManage = res[4].data;
      });
    },
    initDCGroup() {
      Promise.all([
        getDCGRedAlertDetails(),
        getDCGRedYellowAlert(),
        getDCGRedAlertRank(),
        getDCGHighFrequencyMatters(),
        getDCGRedAlertManage(),
      ]).then((res) => {
        if (res[0].data.length > 0) {
          res[0].data.map((r) => {
            this.dcData.alertBar = redAlertDetailBar.map((i) => {
              if (r.type == i.title) {
                i.value = r.num;
              }
              return i;
            });
          });
        } else {
          this.dcData.alertBar = redAlertDetailBar;
        }

        res[1].data.map((r) => {
          this.dcData.cardData = cardData.map((i) => {
            if (i.title == r.type) {
              i.value = r.num;
              if (i.finish != undefined) {
                i.finish = r.num2;
              }
              if (i.unfinish != undefined) {
                i.unfinish = r.num3;
              }
            }
            return i;
          });
        });

        this.dcData.highFrequencyDept = res[2].data;

        this.dcData.highFrequencyMatters = res[3].data;

        this.dcData.redAlertManage = res[4].data;
      });
    },
    linkTo(item) {
      this.$router.push(item);
    },
  },
  created() {
    this.role = JSON.parse(localStorage.getItem("user")).homeRole;

    switch (parseInt(this.role)) {
      case 1:
        this.initData();
        break;
      case 2:
        this.initDeptData();
        break;
      case 3:
        this.initDCLeader();
        break;
      case 4:
        this.initDCGroup();
        break;
    }
  }, 
};

const dropdownOptions = [
  {
    // icon: "",
    // label: "前期节点",
    // style: "",
    // class: "dropdown-item",
    // linkUrl: "/commonForm/t_node_instance/0",
    // linkUrl: "/workCollectionFrontNode",
  },
  // {
  //   icon: "",
  //   label: "中介服务",
  //   style: "",
  //   class: "dropdown-item",
  //   linkUrl: "/workCollectionIntermediaryService",
  // },
  // {
  //   icon: "",
  //   label: "招投标",
  //   style: "",
  //   class: "dropdown-item",
  //   linkUrl: "/workCollectionBidding",
  // },
  {
    icon: "",
    label: "工程合同",
    style: "",
    class: "dropdown-item",
    linkUrl: "/commonForm/t_contract/0",
    // linkUrl: "/workCollectionProjectContract",
  },
  {
    icon: "",
    label: "工程变更",
    style: "",
    class: "dropdown-item",
    linkUrl: "/commonForm/t_project_change/0",
    // linkUrl: "/workCollectionProjectChanges",
  },
  {
    icon: "",
    label: "人员变更",
    style: "",
    class: "dropdown-item",
    linkUrl: "/commonForm/t_person_change/0",
    // linkUrl: "/workCollectionManager",
  },
  {
    icon: "",
    label: "竣工验收",
    style: "",
    class: "dropdown-item",
    linkUrl: "/commonForm/t_accept/0",
    // linkUrl: "/workCollectionCompletionAcceptance",
  },
  {
    icon: "",
    label: "绩效自评",
    style: "",
    class: "dropdown-item",
    linkUrl: "/commonForm/t_appraise/0",
    // linkUrl: "/workCollectionPerformanceSelfAssessment",
  },
];
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
